<template>
  <div>
    <a-table :pagination="false" :columns="columns" :data-source="data" :row-key="(record) => record.code" class="components-table-demo-nested">
      <template #bodyCell="{ column, record, text }">
        <!-- 文件名称 -->
        <SelectChoose :tableItemConfig="getTableItemConfig()" />
        <!-- 申请原因 -->
        <!-- 删除项 -->
        <template v-if="column.key === 'operation'">
          <span @click="onDelete(record.code)" class="form-table-actions">删除</span>
        </template>
      </template>
      <!-- 必填选项 -->
      <template #headerCell="{ column }"
        ><template v-if="column.key === 'name'"><span class="form-table-heard">文件名称</span></template>
        <template v-else-if="column.key === 'securityLevel'"
          ><span class="">保密等级 </span>
          <a-tooltip placement="top" :overlayStyle="{ maxWidth: '655px' }">
            <template #title>
              <p>
                <span>1、绝密：指一旦泄密会使国家遭受严重危害和重大损失的。特指某些秘密文件资料，比如设计图纸、</span>
              </p>
              <p>
                <span>投标方案、电子帐本、程序源码、个人隐私以及一些包含重要信息的录像带和光盘等文件。</span>
              </p>
              <p>
                <span>2、机密：指标有“机密”密级的文件、简报等形式含有国家重要秘密、泄露会使国家的安全和利益</span>
              </p>
              <p>
                <span>遭受严重的损害的载体。有文件、简报、讲话材料，各种资料、报表、刊物，以文字、符号、图形、</span>
              </p>
              <p>
                <span>声、像等形式。</span>
              </p>
              <p>
                <span>3、秘密：可以称为私有文件，或者是因为某些原因，而不可以向大众公开的文件，如国家机密文件等。</span>
              </p>
              <p>
                <span>4、公开：没有什么影响，可以公开的。</span>
              </p>
            </template>
            <span class="promptIcon"><question-circle-outlined /></span>
          </a-tooltip>
        </template>
        <template v-else-if="column.key === 'applyReason'"><span class="form-table-heard">申请原因</span></template>
      </template>
    </a-table>
    <a-button type="dashed" @click="handleAdd" style="width: 100%">+ 添加</a-button>
    <div class="space-x-2 w-full text-center my-4 btn">
      <a-button @click="cancel">返回</a-button>
      <a-button type="primary" @click="submit(0)">暂存</a-button>
      <a-button type="primary" @click="submit(1)">提交</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { onBeforeUnmount, defineComponent, ref, computed, createVNode, getCurrentInstance, UnwrapRef, reactive, watch, inject } from 'vue';
import { message, Modal } from 'ant-design-vue';
import SelectChoose from '../component/selectChoose.vue';
import { fileSave } from '@/config/api/documentApplication';
import { useRouter } from 'vue-router';
import { throttle } from 'xe-utils';

const getTableItemConfig = () => {
  return [
    {
      type: 'name',
      props: {},
      on: {
        recordName
      }
    },
    {
      type: 'applyReason',
      props: {},
      on: {
        recordApplyReason
      }
    }
  ];
};

const props = defineProps({
  creatorData: Object
});
// watch(
//   props.creatorData,
//   (newValue, oldValue) => {
//     console.log('newValue', newValue);
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// );
console.log('tstst', props.creatorData);

const router = useRouter();
const columns = [
  { title: '序号', dataIndex: 'index', key: 'index', width: 80, defaultSortOrder: 'descend', customRender: ({ index }) => index + 1 },
  { title: '文件名称', dataIndex: 'name', key: 'name', width: 120 },
  { title: '文件编码', dataIndex: 'code', key: 'code', width: 120 },
  { title: '文件类型', dataIndex: 'directoryId', key: 'directoryId', width: 150 },
  { title: '版本号', dataIndex: 'version', key: 'version', width: 100 },
  { title: '保密等级', dataIndex: 'securityLevel', key: 'securityLevel', width: 140 },
  { title: '是否文件模板', dataIndex: 'isTemplate', key: 'isTemplate', width: 150 },
  { title: '文件负责人', dataIndex: 'principalId', key: 'principalId', width: 150 },
  { title: '文件会签人', dataIndex: 'counterSignIds', key: 'counterSignIds', width: 150 },
  { title: '关键字', dataIndex: 'keyword', key: 'keyword', width: 150 },
  { title: '主要内容', dataIndex: 'mainContent', key: 'mainContent', width: 150 },
  { title: '申请原因', dataIndex: 'applyReason', key: 'applyReason', width: 150 },
  { title: '操作', key: 'operation', width: 200 }
];

const data: any = ref([]);
let count = 1;
let lineAdd = ref(false);
const handleAdd = () => {
  count++;
  data.value.push({
    name: '',
    code: `CCJ2017000${count}`,
    directoryId: '',
    version: '',
    securityLevel: '',
    isTemplate: '',
    principalId: '',
    counterSignIds: '',
    keyword: '',
    mainContent: '',
    applyReason: '',
    attachmentFile: '',
    remark: '',
    size: '',
    uploadTime: ''
  });
  lineAdd.value = true;
};

function recordName(e, record) {
  // record.name = e;
  Object.keys(record).forEach((key) => {
    record[key] = e[key];
  });
}

function recordApplyReason(e, record) {
  record.applyReason = e;
}
// 主表删除项
const onDelete = (code) => {
  Modal.confirm({
    title: '是否确定删除',
    autoFocusButton: null,
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确认',
    cancelText: '取消',
    onOk() {
      data.value = data.value.filter((item) => item.code !== code);
    }
  });
};
function cancel() {
  router.go(-1);
}
// 提交操作 op操作 (0=暂存; 1=提交)
const submit = throttle(async function (op) {
  if (data.value && props.creatorData) {
    let isSubmit = true;
    // data.value.forEach((item) => {
    //   if (item.name == '' || item.applyReason == '') {
    //     message.warning('提交失败! 请填选必填选项');
    //     isSubmit = false;
    //     return;
    //   }
    // });
    if (isSubmit) {
      const params = {
        op,
        type: 3,
        status: op === 1 ? 2 : 1,
        applyLists: [
          {
            name: '1',
            code: '1',
            directoryId: '1',
            version: 1,
            securityLevel: 1,
            isTemplate: 1,
            principalId: 1,
            counterSignIds: [1],
            keyword: '1',
            mainContent: '1',
            applyReason: '111',
            attachmentFile: '1',
            remark: '1',
            size: 1
          }
        ],
        ...props.creatorData
      };
      fileSave(params).then((result) => {
        if (result.success) {
          message.success(op === 1 ? '提交成功' : '暂存成功');
          // router.go(-1);
        }
      });
    }
  }
}, 1000);
</script>
<style lang="less" scoped>
.form-table-heard:before {
  content: '*';
  color: #ff4d4f;
}
.form-table-actions {
  color: #005aea;
  cursor: pointer;
  margin-right: 10px;
}
.promptIcon {
  cursor: pointer;
  color: #005aea;
}
.btn {
  margin-top: 300px;
}
</style>
